﻿@model WebsiteImages.Models.UploadImage

@section scripts
{
    @Scripts.Render("~/bundles/jquery")
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.imgareaselect.js")"></script>
    <script>
        $(document).ready(function () {
            //Get the checkboxes and hide them
            var boxes = $('input[type=checkbox]').hide(); // .attr('disabled', true);

            //Get the preview image and set the onload event handler
            var preview = $('#preview').load(function () {
                setPreview();
                ias.setOptions({
                    x1: 0,
                    y1: 0,
                    x2: $(this).width(),
                    y2: $(this).height(),
                    show: true
                });
            });

            //Set the 4 coordinates for the cropping
            var setPreview = function (x, y, w, h) {
                $('#X').val(x || 0);
                $('#Y').val(y || 0);
                $('#Width').val(w || preview[0].naturalWidth);
                $('#Height').val(h || preview[0].naturalHeight);
            };

            //Initialize the image area select plugin
            var ias = preview.imgAreaSelect({
                handles: true,
                instance: true,
                parent: 'body',
                onSelectEnd: function (s, e) {
                    var scale = preview[0].naturalWidth / preview.width();
                    var _f = Math.floor;
                    setPreview(_f(scale * e.x1), _f(scale * e.y1), _f(scale * e.width), _f(scale * e.height));
                }
            });

            var setBox = function (filter) {
                $('button').show();
                boxes.attr('checked', false)
                    .filter(filter).attr({ 'checked': true });
            };

            //Initial state of X, Y, Width and Height is 0 0 1 1
            setPreview(0, 0, 1, 1);

            //What happens if the File changes?
            $('#File').change(function (evt) {
                var f = evt.target.files[0];
                var reader = new FileReader();

                if (!f.type.match('image.*')) {
                    alert("The selected file does not appear to be an image.");
                    return;
                }

                setBox('#IsFile');
                reader.onload = function (e) { preview.attr('src', e.target.result); };
                reader.readAsDataURL(f);
            });

            $('button').hide();
            $('form').submit(function () {
                $('button').attr('disabled', true).text('Please wait ...');
            });
        });
    </script>
}

<h2>Upload an Image</h2>

@using (Html.BeginForm("Create", "WebsiteImage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.HiddenFor(model => model.X)
    @Html.HiddenFor(model => model.Y)
    @Html.HiddenFor(model => model.Width)
    @Html.HiddenFor(model => model.Height)
    @Html.EditorFor(model => model.IsFile)

    <div class="browseDiv">
        <input type="file" name="File" id="File" />
        @Html.ValidationMessageFor(model => model.File)
    </div>
        
    <div >
        @Html.ValidationSummary(true)
    </div>
    
    <div id="upload-cut">
        <img alt="Field for image cutting" id="preview" src="@Url.Content("~/Content/empty.png")" />
    </div>
    <div class="clear">
        <button type="submit">Upload</button>
    </div>
}




